<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  User,
  Setting,
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

</script>

<template>
  <div class="logo-box">
    LOGO
  </div>
  <el-menu active-text-color="#ffd04b" background-color="#24323f" class="el-menu-vertical-demo"
    :default-active="useRouter().currentRoute.value.path" text-color="#fff" router>
    <el-menu-item index="/home/live">
      <el-icon><icon-menu /></el-icon>
      <span>房间管理</span>
    </el-menu-item>
    <el-sub-menu index="/home">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>角色管理</span>
      </template>
      <el-menu-item index="/role" :route="{ name: 'role' }">角色列表</el-menu-item>
      <el-menu-item index="/user" :route="{ name: 'user' }">用户列表</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/home/author-apply">
      <el-icon>
        <document />
      </el-icon>
      <span>主播申请</span>
    </el-menu-item>
    <el-menu-item index="/home/report-room">
      <el-icon>
        <setting />
      </el-icon>
      <span>举报信息</span>
    </el-menu-item>
  </el-menu>
</template>


<style scoped lang="less">
:global(:root) {
  --el-border-color: #24323f;
}
.logo-box {
  height: 60PX;
}
</style>